<style lang="scss">
    @import "../../../utils/base.scss";
</style>
<template>
    <div>
        <!-- 基本信息 -->
        <template id="baseInfo">
            <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
                <p>基本信息</p>
            </div>
            <div class="gcontent" >
                <Form ref="baseInfo" :rules="networkInfoValidate" :model="networkInfo" :label-width="labelWidth" label-position="left" class="form form_left" >
                    <Row v-if="reqId != null && reqId != ''">
                        <Col span="8" >
                            <FormItem label="工单ID：" >
                                <Input v-model="reqId"  :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="申请联系人姓名:">
                                <Input  v-model="networkInfo.applyContact" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="申请人公司部门:"  >
                                <Input  v-model="networkInfo.company" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="申请人邮箱:"  >
                                <Input  v-model="networkInfo.applyMail" :readonly="readonly" />
                            </FormItem>
                        </Col>

                        <Col span="8"  class="col_left" >
                            <FormItem label="申请人电话:" >
                                <Input  v-model="networkInfo.applyPhone" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8"  >
                            <FormItem label="一级4A账号:"  >
                                <Input  v-model="networkInfo.fourA" :readonly="readonly"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8" >
                            <FormItem label="工单标题:"  prop="reqSubject">
                                <Input  v-model="networkInfo.reqSubject" :readonly="ifedit" placeholder="XX系统与XX系统IP互联策略申请"/>
                            </FormItem>
                        </Col>

                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="工单发起时间：" prop="startTime">
                                <!-- <Input v-if="ifedit"  v-model="networkInfo.startTime" :readonly="true"/> -->
                                <DatePicker   :options="disabledDate" v-model="networkInfo.startTime"  style="width: 100%;" type="date" :disabled="ifedit" placeholder="请选择日期" ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem  label="期望完成时间：" prop="hopeTime">
                                <!-- <Input v-if="ifedit"  v-model="networkInfo.hopeTime" :readonly="true"/> -->
                                <DatePicker   :options="disabledDate" v-model="networkInfo.hopeTime"  style="width: 100%;" type="date" :disabled="ifedit" placeholder="请选择日期"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>

        </template>

        <!-- 项目详情 -->
        <div id="projectInfo">
            <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
                <p>项目信息</p>
            </div>
            <div class="gcontent">
                <Form ref="projectInfo2" :rules="networkInfoValidate" :model="networkInfo.projectInfo" :label-width="labelWidth" label-position="left" class="form form_left">
                    <Row>
                        <Col span="8">
                            <FormItem label="提单租户：" prop="roleId">
                                <Input v-if="ifedit" v-model="networkInfo.projectInfo.roleName" :readonly="readonly" />
                                <Select v-else v-model="networkInfo.projectInfo.roleId" @on-change="checkRole" :disabled="ifedit">
                                    <Option :value="i.id" v-for="(i,index) in ProleList" :key="index">{{i.tenant_name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="关联项目：" prop="projectId">
                                <Input v-if="ifedit" v-model="networkInfo.projectInfo.projectName" :readonly="readonly" />
                                <Select v-else v-model="networkInfo.projectInfo.projectId" @on-change="setProjectName"  :disabled="ifedit">
                                     <Option :value="item.id" v-for="(item,index) in projectList" :key="index">{{item.project}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <!-- <Row>
                        <Col span="8">
                            <FormItem label="开始日期：" >
                                <Input v-model="networkInfo.projectInfo.entryStartTime" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="结束日期：" >
                                <Input v-model="networkInfo.projectInfo.entryEndTime" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row> -->
                    <!-- <Row>
                        <Col span="8">
                            <FormItem label="入驻周期：" >
                                <Input v-model="networkInfo.projectInfo.entryCycle" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="入驻位置：" >
                                <Input v-model="networkInfo.projectInfo.entryPosition" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row> -->
                    <Row>
                        <!-- <Col span="8">
                            <FormItem label="是否签订合同：">
                                <Input v-model="networkInfo.projectInfo.isContract" :readonly="readonly" />
                            </FormItem>
                        </Col> -->
                        <Col span="8">
                            <FormItem label="入驻位置：" >
                                {{networkInfo.projectInfo.entryPositio}}
                                <Input v-model="networkInfo.projectInfo.entryPosition" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="项目类型：">
                                <Input v-model="networkInfo.projectInfo.projectType" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8" >
                            <FormItem label="项目经理：">
                                <Input v-model="networkInfo.projectInfo.projectManager" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="经理联系方式:">
                                <Input v-model="networkInfo.projectInfo.managerTel" :readonly="readonly"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row >
                        <Col span="8">
                            <FormItem label="运营人员：" >
                                <Input v-model="networkInfo.projectInfo.business" :readonly="readonly"/>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
        </div>

    </div>
</template>
<script>
    import ajax from "../../../ajax_util"
    import Axios from 'axios'
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    //import file from './file'

    export default {
        name: "apply",
        components:{
           mavonEditor
        },
        data () {
            const validateEntryEndTime = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择期望完成时间'));
                }else{
                    if(this.networkInfo.startTime === ''){
                        callback(new Error('请选择工单发起时间'));
                    }else if(this.networkInfo.startTime.getTime() > value.getTime()){
                        callback(new Error('期望完成时间不能小于工单发起时间'));
                    }else{
                        callback()
                    }
                }
            };
            const validatestartTime = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择发起时间'));
                }else{
                    callback()
                }
            };

            return {
                validate2:{
                    roleId: [
                        {required: true,type: 'number', message: '请选择租户角色', trigger: 'change'},
                    ],
                    projectId: [
                        {required: true, type: 'number',message: '请选择关联项目', trigger: 'change'},
                    ],
                },
                mdvalue:"",
                dataInfoEdit: 0,
                showFileMould:false,
                httpHeader:  {
                    Authorization: this.$store.state.token
                },
                disabledDate: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now()-24*60*60*1000 || date.valueOf() > Date.now()+365*24*60*60*1000;
                    }
                },
                networkInfoValidate:{
                    startTime: [
                        {required: true,validator: validatestartTime, message: '请选择工单开始日期', trigger: 'change'},
                    ],
                    hopeTime:[
                        { required: true, validator: validateEntryEndTime, trigger: 'blur' }
                    ],
                    reqSubject: [
                        {required: true,type: 'string', message: '请输入工单标题:', trigger: 'blur'},
                        { type: 'string', max: 50, message: '最多填写50个字符', trigger: 'blur' }
                    ],
                    roleId: [
                        {required: true,type: 'number', message: '请选择租户角色', trigger: 'change'},
                    ],
                    projectId: [
                        {required: true, type: 'number',message: '请选择关联项目', trigger: 'change'},
                    ],
                },

                fileUrl:this.CONFIG.file_url,
                readonly: true, //是否只读
                labelWidth: 140,
                bealoonTrue: true,
                file: null,
                loadingStatus: false,
                fileUpLoadAction:"",
                name: "",
                istrue: true,
                networkInfo: this.Papply,
                projectList: this.PprojectList,
            }
        },
        created:function(){
        },
        mounted:function() {
            console.log("======networkInfo.projectInfo.projectId=======",this.networkInfo.projectInfo);
            if(this.networkInfo.projectInfo.roleId!=null && this.networkInfo.projectInfo.roleId!=undefined && this.networkInfo.projectInfo.roleId!=""){
                this.checkRole(this.networkInfo.projectInfo.roleId);
            }
        },

        methods: {
            validate(){
                var isSubmit = false
                this.$refs["baseInfo"].validate((valid) => {
                    if (valid) {
                        isSubmit = true
                    } else {
                        this.$Message.error('请填写必填项');
                    }
                })
                if(isSubmit){
                    this.$refs["projectInfo2"].validate((valid) => {
                        if (valid) {
                            isSubmit = true
                        } else {
                            isSubmit = false
                            this.$Message.error('请填写必填项');
                        }
                    })
                }

                console.log("isSubmit---->",isSubmit)
                return isSubmit
            },

            //格式化日期
            formatDate(value) {
                var date = new Date(value*1000);
                var year = date.getFullYear();
                var month = this.padDate(date.getMonth() + 1);
                var day = this.padDate(date.getDate());
                return year + '-' + month + '-' + day;
            },
            padDate(value) {
                return value <10 ? '0' + value:value;
            },
            //选择租户
            checkRole(roleId){
                console.log("roleId2222--->",roleId,this.ProleList,this.networkInfo.projectInfo.projectId)
                //console.log("projectList->",this.projectList,this.ProleList)
                //this.networkInfo.projectInfo = {}
                this.ProleList.some(item =>{
                    if(roleId == item.id){
                        this.networkInfo.projectInfo.roleId = roleId
                        this.networkInfo.projectInfo.roleName = item.role_name
                        this.projectList=item.projects
                        return true
                    }
                })
                // var url = this.CONFIG.url_know + "/getProjects/" + roleId
                // var that=this;
                // ajax.get({
                //     url: url,
                //     that: that,
                //     params: null,
                //     success:function(data){
                //         that.projectList = data
                //     }
                // })
                //console.log("projectList22222->",this.projectList)
            },
            //设置项目名称
            setProjectName(value){
                this.projectList.some(item =>{
                    //console.log("projectList->",this.projectList,item,value)
                    if(item.id === value){
                        this.networkInfo.projectInfo.projectName = item.project
                        console.log("item->",item)
                        this.setProjectInfo(item)
                        return true
                    }
                })
            },
             //设置项目基础详情
            setProjectInfo(data){
                // var info = {}
                var info = {}
                info.roleId =  data.tenant_id
                if(data.tenant_name != null){
                    info.roleName = data.tenant_name
                }
                info.projectId = data.id
                info.projectName = data.project
                info.entryStartTime = data.create_time
                info.entryEndTime = data.end_time
                info.entryCycle = data.cycle
                info.entryPosition = data.position
                info.isContract = data.isContract
                info.projectType = data.projectType
                info.projectManager = data.manager
                info.managerTel = data.manager_phone
                if(data.business == undefined || data.business == null || data.business == ""){
                    info.business = data.tenant_business
                }else{
                    info.business = data.business
                }
                info.projectDoc = data.des
                this.networkInfo.projectInfo = info
                //console.log("-----info---",this.networkInfo);
                this.$forceUpdate();
            },
        },
        props:{
            reqId:{},
            ifedit: {},
            Papply: {},
            ProleList: {},
            PprojectList: {}
        },
        watch:{
            Papply(newV,oldV){
                console.log("baseinfp---->",newV)
                this.networkInfo = this.Papply
            },
            PprojectList(newV,oldV){
                console.log("projectList---->",newV)
                this.projectList = newV
            },
            ProleList(newV,oldV){
                console.log("ProleList---->",newV)
                this.ProleList = newV
            }

        }

    }

</script>
